import { Component, OnInit, ViewChild } from '@angular/core';
import { ColumnType, SPage, TablePageComponent } from '@shared/components/table-page/table-page.component';
import { Body, _HttpClient } from '@delon/theme';
import { NzMessageService, NzModalService } from 'ng-zorro-antd';
import { UserEditComponent } from '../user-edit/user-edit.component';
import { CardManageComponent } from '../card-manage/card-manage.component';
import { UserRentComponent } from '../user-rent/user-rent.component';
import { UserMoveComponent } from '../user-move/user-move.component';
import { ApiService } from '@core/services/api';
import { STData } from '@delon/abc';
import { ACLService } from '@delon/acl';
import { NzSpinModule } from 'ng-zorro-antd/spin';
import { UserAddComponent } from '../user-add/user-add.component';
import { UserPayComponent } from '../user-pay/user-pay.component';

@Component({
  selector: 'user-list',
  templateUrl: './user-list.component.html',
  styles: []
})
export class UserListComponent implements OnInit {
  @ViewChild('st', { static: false }) st: TablePageComponent;
  moveFlag:boolean = this.aclService.canAbility("user-manage/move");//检查用户按钮权限
  cardFlag:boolean =  this.aclService.canAbility("user-manage/card");
  viewFlag:boolean =  this.aclService.canAbility("user-manage/view");
  refundFlag:boolean =  this.aclService.canAbility("user-manage/refund");
  selectData: any[];
  loading = false;
  addUserInfo = {
    userAccount: '',
    userPassword: '',
    userName: '',
    roles: [],
    depts: []
  };
  config: SPage = {
    columns: [
      {
        index: 'infoPeoplePhoto',
        title: '图片',
        width:80,
        type:ColumnType.img,
        exported: false,
      },
      {
        index: 'infoName',
        title: '用户名',
        width:100,
        filter: {
          placeholder: '请输入用户名称',
          type: 'string'
        }
      },
      {
        index: 'infoPeopleType',
        title: '人员类型',
        width:100,
        type: ColumnType.tag,
        tag:{
          1:{text:'业主'},
          2:{text:'房东'},
          3:{text:'租户'},
          4:{text:'保安'},
          5:{text:'保洁'},
          6:{text:'物业人员'},
          7:{text:'网格员'},
          8:{text:'片警'},
        },
        filter: {
          placeholder: '请选择人员类型',
          type: 'select',
          items: [
            {label: '业主', value: 1},
            {label: '房东', value: 2},
            {label: '租户', value: 3},
            {label: '保安', value: 4},
            {label: '保洁', value: 5},
            {label: '物业人员', value: 6},
            {label: '网格员', value: 7},
            {label: '片警', value: 8}
          ]
        }
      },
      {
        index: 'infoSex',
        title: '性别',
        width:100,
        type: ColumnType.tag,
        tag:{
          0:{text:'女'},
          1:{text:'男'},
          9:{text:'未说明的性别'}
        },
        filter: {
          placeholder: '请选择性别',
          type: 'select',
          items: [
            {label: '男', value: 1},
            {label: '女', value: 0},
            {label: '未说明的性别', value: 9}
          ]
        }
      },
      {
        index: 'infoMobile',
        title: '联系电话',
        width:120,
        filter: {
          placeholder: '请输入手机号',
          type: 'string'
        }
      },
      {
        index:'areaName',
        title:'区域名称',
        width:450,
        //className:'w200',
        filter:{
          placeholder: '请输入区域名称',
          type: 'string'
        }
      },
      {
        index:'roomName',
        title:'房间名称',
        width:130,
        filter:{
          placeholder: '请输入房间名称',
          type: 'string'
        }
      },
      {
        index: '',
        title: '操作',
        width:300,
        fixed:'right',
        buttons:[
          {
            text:'详情',
            iif:(data:STData)=>{
              return this.viewFlag
            },
            click:(_record)=>{
              this.editDic(1, _record);
            }
          },
          {
            text:'搬迁',
            iif:(data:STData)=>{
              return data.personType == "租户" && this.moveFlag
            },
            click:(_record)=>{
              this.personMove(_record);
            }
          },
          // {
          //   text:'大图',
          //   click:(_record)=>{
          //     this.imageInfo(_record.infoPeoplePhoto);
          //   }
          // },
          {
            text:'退租',
            iif:(data:STData)=>{
              return this.refundFlag
            },
            click:(_record)=>{
              this.setRent(_record);
            }
          },
          {
            text:'缴费',
            // iif:(data:STData)=>{
            //   return data.personType == "租户"
            // },
            click:(_record)=>{
              this.payMoney(_record)
            }
          },
          {
            text:'卡管理',
            iif:(data:STData)=>{
              return this.cardFlag
            },
            click:(_record)=>{
              this.carManage(_record);
            }
          }
        ]
      },
    ],
    showCheckBox: false,
    reqUrl:'/core/person/page',
    // editBtn: [
    //   {title: '详情' },
    //   {title: '冻结'},
    //   {title: '大图'},
    //   {title: '退租'},
    //   {title: '卡管理'}
    // ]
  }
  constructor(private http: _HttpClient,  private api: ApiService, private modal: NzModalService, private message: NzMessageService,private aclService: ACLService,) { }
  
  ngOnInit() {

  }
  ngAfterViewInit(){
    const self=this
    document.getElementsByTagName('table')[0].addEventListener('click',function(e){
     if(e.target && (<HTMLElement>e.target).nodeName.toLowerCase() == "img"){
       let src=(< HTMLMediaElement>e.target).currentSrc
       self.imageInfo(src)
     }
    })
  }
  payMoney(_param?:object):void{
    this.modal.create({
      nzTitle: "缴费",
      nzContent: UserPayComponent,
      nzWidth: 1200,
      nzComponentParams: {
        _param
      },
      nzOnOk: () => {
        // this.st.reload();
      },
      nzFooter: null
    })
  }

  // 编辑功能开始
  editDic(type: 0 | 1 = 0, _param?: object): void {
    console.log(type);
    const modal = this.modal.create({
      nzTitle: '用户信息',
      nzContent: UserEditComponent,
      nzWidth: 1200,
      nzComponentParams: {
        type,
        _param
      },
      nzOnOk: () => {
        this.st.reload();
      },
      nzFooter: null
    })
    modal.afterClose.subscribe(res => {
      if (res === 'ok') {
        this.st.reload();
      }
    })
  }
  //冻结人员信息
  fuserInfo(param:number):void{
    console.log(param);
    const body = [];
    body.push(param);
    this.http.put('/core/person/batch/cancel',body).subscribe(res => {
      if(res.status === '200'){
        this.message.success('冻结成功');
        this.st.reload();
      }
    })
  }

  imageInfo(imageUrl?: string): void {
    
    const modal = this.modal.create({
      nzTitle: '图片信息',
      nzContent: '<img width="100%" src="'+imageUrl+'">',
      nzWidth: 800,
      nzFooter: null
    })
  }

  //新增人员
  addPeople():void{
    const modal = this.modal.create({
      nzTitle: '新增人员',
      nzContent: UserAddComponent,
      nzWidth: '60%',
      nzComponentParams: {
      },
      nzOnOk: () => {
        this.st.reload();
      },
      nzFooter: null
    })
    modal.afterClose.subscribe(res => {
      if (res === 'ok') {
        this.st.reload();
      }
    })
  }
  //卡管理
  carManage(param:any): void {
    const modal = this.modal.create({
      nzTitle: '卡管理',
      nzContent: CardManageComponent,
      nzWidth: '90%',
      nzComponentParams: {
         param
      },
      nzOnOk: () => {
        this.st.reload();
      },
      nzFooter: null
    })
    modal.afterClose.subscribe(res => {
      if (res === 'ok') {
        this.st.reload();
      }
    })
  }

  operate(e: any): void {
    if (e.title === '详情') {
      this.editDic(1, e.data);
    }else if(e.title === '冻结'){
      this.fuserInfo(e.data.id);
    }else if(e.title === '大图'){
      this.imageInfo(e.data.infoPeoplePhoto);
    }else if(e.title === '卡管理'){
      this.carManage(e.data);
    }
  }
  _console(e: any): void {
    this.selectData = e;
  }

  dataProcess(data: STData[]){
    console.log(data);
    return data;
  }

  //冻结多人
  fusersInfo() {
    if (!!this.selectData && this.selectData.length !== 0) {
      this.modal.confirm({
        nzTitle: '您确定要冻结这些数据吗',
        nzOnOk: () => {
          const body = [];
          this.selectData.forEach(item => {
            body.push(item.id)
          })
          this.http.put('/core/person/batch/cancel',body).subscribe(res => {
            if(res.status === '200'){
              this.message.success('冻结成功');
              this.st.reload();
            }
          })
        }
      })
    } else {
      this.message.warning('请选择数据');
    }
  }
  //退租
  setRent(param:any){
    const modal = this.modal.create({
      nzTitle: '退租',
      nzContent: UserRentComponent,
      nzWidth: '70%',
      nzComponentParams: {
         param
      },
      nzOnOk: () => {
        this.st.reload();
      },
      nzFooter: null
    })
    modal.afterClose.subscribe(res => {
      if (res === 'ok') {
        this.st.reload();
      }
    })
  }

  //搬迁
  personMove(param:any){
    const modal = this.modal.create({
      nzTitle: "人员搬迁",
      nzContent:UserMoveComponent,
      nzWidth:600,
      nzComponentParams:{
        param
      },
      nzOnOk:()=>{
        this.st.reload();
      },
      nzFooter:null
    })
    modal.afterClose.subscribe(res=>{
      if(res==='ok'){
        this.st.reload();
      }
    })
  }

  //导出
  export(){
    this.loading=true;
    let body:any={};
    if(this.st.st.req.params != undefined){
      body=this.st.st.req.params;
    }
    body.pageNum=1;
    body.pageSize=this.st.st.total;
    this.http.post("/core/person/page",body).subscribe(res => {
      this.loading=false;
      console.log(res)
      if(res.status == 200 && res.data.list.length > 0){
        let data=res.data.list;
        data.forEach(item => {
            if(item.infoSex == 0){
              item.infoSex="女"
            }else if(item.infoSex == 1){
              item.infoSex="男"
            }else if(item.infoSex == 9){
              item.infoSex="未说明的性别"
            }
        });
         this.st.st.export(data,{
          filename : "人员信息.xlsx"
        })
      }else{
        this.message.error(res.message);
      }
    })
  

  }

}
